<template>
<div v-wechat-title="$route.meta.title"></div>
    <Header />
    <div class="total"><span class="username">{{userInfo.name}}</span>您共发布了<span class="article-total">{{articles.total}}</span>篇文章</div>
    <br />
        <div v-for="article in articles.data" v-bind:key="article.id" id="card">
            <el-timeline>
                <el-timeline-item :timestamp="dateformat(article.created_at)+' created'" placement="top" color="lightskyblue">
                    <el-card class="box-card" shadow="hover">
                        <router-link
                            :to="{ name: 'ArticleDetail', params: { id: article.id } }"
                            class="article-title"
                        >
                            {{ article.title }}
                        </router-link>
                        <div class="category">
                            <span>文章类别：{{article.Category.name}}</span>  
                        </div>
                        <span class="handle">
                        <router-link
                            :to="{ name: 'ArticleUpdate', params: { id: article.id } }"
                            class="article-update"
                        >
                            修改
                        </router-link>
                        
                            <el-popconfirm
                                confirm-button-text="Yes"
                                cancel-button-text="No"
                                :icon="InfoFilled"
                                icon-color="red"
                                title="确定删除这篇文章吗？"
                                @confirm="delete_article(article.id)"
                            >
                                <template #reference>
                                <span class="article-delete">删除</span>
                                </template>
                            </el-popconfirm>
                        
                        </span>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>
    <Footer />
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import articleService from "@/service/articleService";
import dateformat from "@/utils/dateformat";
import { InfoFilled } from '@element-plus/icons'
import { mapState } from 'vuex';
import { message } from 'ant-design-vue';

export default {
    name: "MyArticles",
    components: { 
        Header,
        Footer,
        InfoFilled,
        },
        inject:['reload'],
    data(){
        return{
                articles:"",
            };
    },
    mounted(){
        articleService.get_my_articles().then((response) => (this.articles = response.data.data));
    },
    computed: mapState({
        userInfo: (state) => state.userModule.userInfo,
    }),
    methods:{
        dateformat,
        delete_article(id){
            articleService.delete_article("posts/" + id)
            .then(() => {
                    message.success('删除成功',2.5);
                    this.reload();
                    });
            },
    },
};

</script>

<style scoped>
#card{
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
}
.box-card{
    width: 400px;
}
.username{
    padding-right:20px;
}
.article-title {
    color: black;
    text-decoration: none;
    padding: 5px 0 5px 0;
    font-family: "Ubuntu", "Noto Serif SC", source-han-serif-sc, sans-serif;
    font-weight: 700;
    font-style: normal;
}
.article-title:hover {
    color: grey;
}
.created-time {
    font-size: 13px;
}
.total{
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
}
.article-total{
    padding:5px;
    font-weight: 500;
    color: lightseagreen;
}
.handle{
    display:flex;
    justify-content: right;
}
.article-update{
    text-decoration: none;
    padding: 5px;
    color: black;
}
.article-update:hover{
    color: lightskyblue;
}
.article-delete{
    cursor: pointer;
    text-decoration: none;
    padding: 5px;
    color: black;
}
.article-delete:hover{
    color: lightskyblue;
}
.category{
    padding-top:10px ;
}
.category-title{
    font-size: 13px;
    display:flex;
    
}
.essay{
    font-weight: 600;
    color: lightseagreen;
    cursor: pointer;
}
.essay:hover{
    color: rgb(61, 219, 211);
}
.story{
    font-weight: 600;
    color: lightsalmon;
    cursor: pointer;
}
.story:hover{
    color: rgb(250, 111, 57);
}
</style>